<template>
    <div>
        <el-row class="mb" :gutter="20">
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <el-card class="card-tip" shadow="always" style="background-color: #5470c6">
                    <div class="title">
                        <span>用户统计</span>
                        <el-tag size="default" style="color: #5470c6">实时</el-tag>
                    </div>
                    <div class="count">29</div>
                    <div class="tip">当前总用户数量</div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <el-card class="card-tip" shadow="always" style="background-color: #9a60b4">
                    <div class="title">
                        <span>商品统计</span>
                        <el-tag size="default" style="color: #9a60b4">实时</el-tag>
                    </div>
                    <div class="count">918</div>
                    <div class="tip">当前总商品数量</div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <el-card class="card-tip" shadow="always" style="background-color: #3ba272">
                    <div class="title">
                        <span>订单统计</span>
                        <el-tag size="default" style="color: #3ba272">实时</el-tag>
                    </div>
                    <div class="count">29</div>
                    <div class="tip">当前总订单数量</div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <el-card class="card-tip" shadow="always" style="background-color: #fc8452">
                    <div class="title">
                        <span>销售统计</span>
                        <el-tag size="default" style="color: #fc8452">实时</el-tag>
                    </div>
                    <div class="count">2075</div>
                    <div class="tip">当前总销售数量</div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="margin-top: 20px;" >
                <el-card shadow="always">
                    <div class="region" ref="userDom"></div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="margin-top: 20px;" >
                <el-card shadow="always">
                    <div class="region" ref="pageDom"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref,onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import _ from 'lodash'
import reportsApi from "@/api/reports.js";

let userDom = ref()
let $userEcharts = null;
const initUserReports = async function () {
    $userEcharts = echarts.init(userDom.value)
    $userEcharts.showLoading();
    // setOption - 方法在echarts 执行中可以多次调用，会自动进行数据组合
    $userEcharts.setOption({
        title: {
            text: '用户来源数据',
            left: 'center'
        },
        dataZoom: {},
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top: '100',
            left: '20',
            right: '20',
            bottom: '20',
            containLabel: true
        },
        yAxis: [
            {
                type: 'value'
            }
        ],
        legend: {
            top: '40',
            data: [] // 后台提供
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: [] // 后台提供
            }
        ],
        series: []  // 后台提供
    });
    let res = await reportsApi.reportsLoad(1);
    $userEcharts.setOption(res);
    $userEcharts.hideLoading();
}

let pageDom = ref()
let $pageEcharts = null;
const initPageReports = async function () {
    $pageEcharts = echarts.init(pageDom.value)
    $pageEcharts.showLoading();
    $pageEcharts.setOption({
        title: {
            text: '页面访问统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        dataZoom: {},
        grid: {
            top: '100',
            left: '20',
            right: '20',
            bottom: '20',
            containLabel: true
        },
        legend: {
            top: "40",
            data: []
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: []
    });
    let res = await reportsApi.reportsLoad(2);
    // 开始数据格式调整
    let xAxisData = [];  // 记录需要 xAxis 数据
    let legendData = []; // 记录需要的 legend 数据
    let series = {}; // 记录 serise 数据
    // 进行时间排序
    let keys = Object.keys(res).sort((a, b) => {
        return new Date(a) > new Date(b) ? 1 : -1;
    });
    // 根据排序结果获取对应数据
    // 完成循环进行数据转存
    for (const key of keys) {
        // key 为时间，直接存放于 x轴
        xAxisData.push(key);
        // 对获取对象进行循环
        for (const item of res[key]) {
            // 判断legend是否重复，如果非重复，进行新标志添加
            if (!legendData.includes(item.rp2_page)) {
                legendData.push(item.rp2_page);
            }
            // 判断对应标志的series 是否已经存在
            if (series[item.rp2_page]) {
                // 如果存在 为 data 提供新的 组成数据
                series[item.rp2_page].data.push(item.rp2_count);
            } else {
                // 如果不存在构建新的 series数据
                series[item.rp2_page] = {
                    name: item.rp2_page,
                    type: "bar",
                    data: [item.rp2_count]
                }
            }
        }
    }
    let pageOption = {
        legend: {
            data: legendData
        },
        xAxis: [
            {
                data: xAxisData
            }
        ],
        series: Object.values(series),
    }
    $pageEcharts.setOption(pageOption)
    $pageEcharts.hideLoading()
}

const resizeCallback = _.debounce(() => {
    // 防抖
    $userEcharts.resize();
    $pageEcharts.resize();
})

onMounted(()=>{
    initUserReports();
    initPageReports();
    window.addEventListener("resize",resizeCallback)
})
onUnmounted(()=>{
    window.removeEventListener("resize",resizeCallback)
})

</script>
<style lang="scss" scoped>
.region,
.pages {
    width: 100%;
    height: 500px;
}

.mb {
    margin-bottom: 20px;
}

.card-tip {
    color: white;
}

.card-tip :deep(.el-card__body){
    padding: 10px 10px;
}

.card-tip .title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-weight: bold;
    font-size: 14px;
}

.card-tip .count {
    font-size: 30px;
    text-align: center;
    padding: 8px 0px;
}

.card-tip .tip {
    font-size: 12px;
}
</style>